<template xmlns:el-col="http://www.w3.org/1999/html">


  <div >

    <div >

      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#FFFFFF"
        text-color="#330000"
        active-text-color="#ffd04b">

        <el-menu-item index="0">
          <img src="http://qxobys3iq.hb-bkt.clouddn.com/89f71f4b1bcb245133c089375c82d73.png" />
        </el-menu-item>

        <el-row :gutter="10">

          <!--<el-col :span="3">-->
            <!--<el-input v-model="input" placeholder="搜索菜谱、食材"></el-input>-->

          <!--</el-col>-->

          <!--<el-col :span="4">-->
            <!--<el-button icon="el-icon-search" circle ></el-button>-->
          <!--</el-col>-->

          <el-col :span="2">
            <el-menu-item index="2">首页</el-menu-item>
          </el-col>

          <el-col :span="2">
            <el-menu-item index="10">市集</el-menu-item>
          </el-col>

          <el-col :span="2">
            <el-menu-item index="7">收藏</el-menu-item>
          </el-col>

          <el-col :span="2">
            <el-dropdown>
               <el-menu-item index="5" class="el-dropdownlogin-link" >登录</el-menu-item>

               <!--<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->

               <el-dropdown-menu slot="dropdown">

<!--                  <el-dropdown-item>短信验证码登录</el-dropdown-item>
                  <el-dropdown-item>邮箱登录</el-dropdown-item>-->
                 <div @click="tologin()"><el-dropdown-item>账号密码登录</el-dropdown-item></div>
                 <div @click="tologindx()"><el-dropdown-item>短信验证码登录</el-dropdown-item></div>
                 <div @click="tologinyx()"><el-dropdown-item>邮箱登录</el-dropdown-item></div>

              </el-dropdown-menu>

            </el-dropdown>
          </el-col>

          <el-col :span="2">
            <el-menu-item index="6">购物车</el-menu-item>
          </el-col>

          <el-col :span="2">
            <el-menu-item index="8">订单</el-menu-item>
          </el-col>

          <el-col :span="2">

            <el-dropdown>

            <el-menu-item index="8">个人中心</el-menu-item>

              <el-dropdown-menu slot="dropdown">

                <el-dropdown-item >
                    <div @click="toUsers()">个人信息</div>

                </el-dropdown-item>

                <el-dropdown-item >
                   <div @click="toHistory()">浏览历史</div>
                </el-dropdown-item >

              </el-dropdown-menu>
            </el-dropdown>
          </el-col>

        </el-row>
      </el-menu>
    </div>

  </div>
</template>

<script>

  export default {
    data() {
      return {

        activeIndex2: '1',
        input: ''
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        if (key==7){
          this.$router.push("/collection")
        }
        if (key==6){
          this.$router.push("/carts")
        }
        if (key==8){
          this.$router.push("/orders")
        }
        if (key==2){
          this.$router.push("/")
        }
        if (key==9){
          this.$router.push("/comment")
        }
        if (key==10){
          this.$router.push("/goods")
        }
      },
      toUsers: function () {
        this.$router.push("/users")
      },
      toHistory:function(){
        this.$router.push("/history")
      },
      tologin:function () {
        this.$router.push('/login')
      },
      tologinyx:function () {
        this.$router.push('/loginyx')
      },
      tologindx:function () {
        this.$router.push('/logindx')
      },

    }
  }
</script>

<style scoped>
  .avator {
    width: 40px;
    height: 40px;
  }
   .name {
    margin-top: 20px;
    color: #333;
  }
  .posimg {

    left: auto;

  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
